<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="num">
        <h1>{{name}} 欢迎你！</h1>
        <h3>您是第{{num}}位学习vue的用户</h3>
        <button @click="hello">欢迎你！</button>

        <hr>
        <h2>课程列表：</h2>
        <!-- <input type="checkbox" v-model="goods" value="Java">java <br>
        <input type="checkbox" v-model="goods" value="Python">Python <br>
        <input type="checkbox" v-model="goods" value="Go">Go <br> -->

        <div v-for="(good,id) in goods" :key="id">
            {{id}} <input type="checkbox" v-model="shopCar" :value="good" />{{good}} <br>
        </div>

        <hr>
        <h2>您选中的课程:{{shopCar.join(",")}}</h2>

    </div>

    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    name: 'Hello Vue!',
                    num: 1,
                    goods: [
                        "Java",
                        "Python",
                        "Go"
                    ],
                    shopCar: [],
                }
            },
            methods: {
                hello() {
                    alert("Hello")
                }
            },
            created() {
                console.log("我是create函数");
            }
        }).mount('#app')
    </script>
</body>

</html>